<%-- 
    Document   : main
    Created on : Jun 1, 2016, 2:10:30 PM
    Author     : niugao
    主页面，可以进入班级管理和学生管理
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@ taglib prefix="jstl" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="common.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title><%=g_title %>
    </title>
    <link rel="stylesheet" type="text/css" href="/css/main.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <script src="/js/jquery-1.12.4.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/js/bootstrap.min.js"></script>
    <style>
        table td img{
            height: 30px;
        }
    </style>
</head>
<body>
<!-- 很多页面都使用这个顶部栏，所以拿出来放到一个单独文件中 -->
<jsp:include page="componse/top_bar.jsp" flush="true"/>

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <label class="navbar-brand">员工管理系统</label>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li><a href="/Saccount/tuichu">退出登录</a></li>
            <li class="active"><a>考勤信息</a></li>
            <li><a href="/class/class_man">部门管理</a></li>
            <li ><a href="/Saccount/student_man">员工管理</a></li>
        </ul>
    </div>
</nav>

<div class="container">
    <table class="table table-striped">
        <thead>
        <tr>
            <th></th><th>名字</th><th>班级</th><th>签到时间</th><th>签退时间</th><th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr><td colspan="6">迟到</td></tr>
        <jstl:forEach items="${latedChecks}" var="check">
            <tr>
                <td><img src="/img/${check.studentHeadImg}" /></td>
                <td>${check.studentName}</td>
                <td>${check.studentClass}</td>
                <td>${check.checkInTime}</td>
                <td>${check.checkOutTime}</td>
                <td>${check.status}</td>
            </tr>
        </jstl:forEach>

        <tr><td colspan="6">旷工</td></tr>
        <jstl:forEach items="${absencedChecks}" var="check">
            <tr>
                <td><img src="/img/${check.studentHeadImg}" /></td>
                <td>${check.studentName}</td>
                <td>${check.studentClass}</td>
                <td>${check.checkInTime}</td>
                <td>${check.checkOutTime}</td>
                <td>${check.status}</td>
            </tr>
        </jstl:forEach>

        <tr><td colspan="6">未打卡</td></tr>
        <jstl:forEach items="${noChecks}" var="check">
            <tr>
                <td><img src="/img/${check.studentHeadImg}" /></td>
                <td>${check.studentName}</td>
                <td>${check.studentClass}</td>
                <td>${check.checkInTime}</td>
                <td>${check.checkOutTime}</td>
                <td>${check.status}</td>
            </tr>
        </jstl:forEach>

        </tbody>
    </table>
</div>

<div id="realtime_info">

</div>
</body>
<script>
    //保存了上一次最晚的考勤信息的时间
    var last_check_info_time = 0;
    function refreshCheckInfo() {
        //向服务端发出请求，获取最新的考勤信息
        $.getJSON("/api/student/getLastCheckInfo",
                {last_check_time:last_check_info_time},
                function (json,status) {
                    //请求得到回应之后调用的方法
                    /*如果成功，得到的json是这样的，注意，id是考勤信息的id，而不是学生的
                     {
                     result:1,
                     checkInfos:[
                     {id:2,studentName:"xiaowang",checkTime:"2013-09-09 00:05:06"},
                     {id:3,studentName:"xiaowang",checkTime:"2013-09-09 00:05:07"}
                     ...
                     ]
                     }
                     */
                    if(json.result==0){
                        //服务端返回失败

                    }else{
                        var checkInfos=json.checkInfos;
                        $.each(checkInfos,function(i,checkInfo){
                            var date=new Date(checkInfo.checkTime);
                            $("#realtime_info").html(checkInfo.studentName+"&nbsp;"+date+"<br/>");
                        });

                        //保存下最后一条考勤信息的时间
                        last_check_info_time=checkInfos[checkInfos.length-1].checkTime;
                    }

                    //服务端返回之后再重新设置定时器
                    setTimeout("refreshCheckInfo()", 2000);
                }
        );
    }
    setTimeout("refreshCheckInfo()", 1000);
</script>
</html>
